<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Aprendiendo jQuery</title>
		<script src="jquery-1.8.3.min.js"> </script>
		
		<script type="text/javascript">
			$(document).on('ready', function(){
				$('#btappendto').on('click', function(){
					$('ol li:first').appendTo('ol:first');
				});

				$('#btappendhola').on('click', function(){
					$('ol:first').append('HOLA');
				});

				$('#btappend').on('click', function(){
					$('ol:first').append($('ol li:first'));
				});

				$('#btprependto').on('click', function(){
					$('ol li:last').prependTo('ol:first');
				});

				$('#btprepend').on('click', function(){
					$('ol:first').prepend($('ol li:last'));
				});

				$('#btinsertafter').on('click', function(){
					$('ol li:first').insertAfter('.d1');
				});

				$('#btafter').on('click', function(){
					$('.d1').after($('ol li:first'));
				});

				$('#btinsertbefore').on('click', function(){
					$('ol li:first').insertBefore('.d1');
				});

				$('#btbefore').on('click', function(){
					$('.d1').before($('ol li:first'));
				});

				$('#btclon').on('click', function(){
					$('.d1').before($('ol li:first').clone());
				});

				$('#btgenerar').on('click', function(){
					$('.d1').before($('<div class="d">Hola</div>'));
				});

				$('#btdel').on('click', function(){
					$('ol li:first').remove();
				});
			});
		</script>
		<style>
		body
		{
			background:#CCC;
			color:#000;
			font-family:Arial;
			margin:0;
			padding:0;
		}
		.d
		{
			background:#4ba80d;
			display:block;
			height:100px;
			margin: 25px auto;
			width:150px;
		}
		.d1
		{
			background:#ba7a1a;
			border-radius: 0 50px 0 50px;
		}
		.d2
		{
			padding:15px;
			border-radius: 50px 0 50px 0;
		}
		.h
		{
			margin: 25px auto;
			width:350px;
		}

		</style>
	</head> 
	<body>
		

		<div class="h">
		<a href="http://rfsoutodev.blogspot.com.es">Rfsouto.com</a>

		<ol>
			<li>Elemento 1</li>
			<li>Elemento 2</li>
			<li>Elemento 3</li>
			<li>Elemento 4</li>
		</ol>

		<button id="btappendto">appendTo</button>
		<button id="btappendhola">append hola</button>
		<button id="btappend">append</button>
		<button id="btprependto">preppendTo</button>
		<button id="btprepend">preppend</button>
		<button id="btinsertafter">insertAfter</button>
		<button id="btafter">after</button>
		<button id="btinsertbefore">insertBefore</button>
		<button id="btbefore">before</button>
		<button id="btclon">clone</button>
		<button id="btgenerar">generar</button>
		<button id="btdel">eliminar</button>
		</div>

		<div class="d d1">
			<p>Div 1</p>
		</div>

		<div class="d d2">
			<p>Div 2</p>
		</div>
	</body>
</html>